{
    const NAME = 'components.scroller'
    const Fns = require(__LIBS__ + '/functions')
    module.exports = require('angular')
        .module(NAME, [
            require(__COMPONENTS__ + '/server/service').name
        ])
        .directive(NAME, function () {
            return {
                link: function (scope, element, attr) {
                    require.ensure([], () => {
                        var jquery = require('jquery')
                        scope.start(jquery, element)
                    })
                },
                controller: NAME
            }
        })
        .controller(NAME, function ($scope, serverservice) {
            var scope = $scope, $, scroller, isScrolling = true, page = 1, maxPage = 5;
            scope.start = function (jquery, element) {
                $ = jquery
                scroller = $(element)
                isScrolling = false

                
                Fns.mouseWheel(function (event, target, direct) {
                    if (!isScrolling && serverservice.showMoreServers === false) {
                        scope.scrollAt((function () {
                            if (direct > 0) {
                                return page >= maxPage ? page : (page + 1)
                            } else {
                                return page <= 1 ? page : (page - 1)
                            }
                        })())
                    }
                })
            }

            scope.scrollAt = (index) => {
                if (page === index) return;
                isScrolling = !isScrolling
                scroller.animate({
                    left: 1920 - index * 1920 + 'px'
                }, 750, function () {
                    page = index
                    isScrolling = !isScrolling
                })
            }

        })
}
